<template>
<el-form :model="model" class="goodsInfo" label-width="100px" :rules="rules" :disabled="disabled" ref="form">
  <el-form-item label="商品名称:" prop="name">
    <el-input v-model="model.name" :maxlength="30" show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="商品副标题:" prop="subTitle">
    <el-input v-model="model.subTitle" :maxlength="50" show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="分类种类:" prop="tag">
    <el-select v-model="model.tag">
      <el-option :value="0" label="普通商品类别"></el-option>
      <el-option :value="1" label="特殊商品类别"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="商品分类:" prop="productCategoryId">
    <el-cascader
      v-model="productCategory"
      :key="casKey"
      clearable
      :options="casOptions"
      :props="{
        multiple: true,
        label: 'name',
        value: 'id'
      }"></el-cascader>
  </el-form-item>
  <el-form-item label="商品标签:" prop="label">
    <y-dynamic-tags
      v-model="model.label"
      :disabled="disabled"
      tips="添加标签"></y-dynamic-tags>
  </el-form-item>
  <el-form-item label="货号:" prop="productSn">
    <el-input v-model="model.productSn" :maxlength="20" show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="计量单位:" prop="unit">
    <el-input v-model="model.unit" :maxlength="5" show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="是否可退:" prop="returnModel">
    <el-select v-model="model.returnModel" :disabled="model.tag === 1">
      <el-option :value="0" label="不可退"></el-option>
      <el-option :value="1" label="可退"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="物流方式:" prop="deliveryMode">
    <el-select v-model="model.deliveryMode" clearable :disabled="model.tag === 1">
      <el-option v-for="item in getEnum('deliveryMode')" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="物流规则:" prop="ruleId" v-if="model.deliveryMode !== 1" :rules='[{required: true, message: "请选择商品物流规则", trigger: "change"}]'>
    <el-select v-model="model.ruleId">
      <el-option
        v-for="item in ruleList"
        :key="item.id"
        :value="item.id"
        :label="item.name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="排序:" prop="sort">
    <el-input-number v-model="model.sort"></el-input-number>
  </el-form-item>
</el-form>
</template>

<script>
export default {
  name: "goodsInfo",
  inject: ['getEnum', 'pattern'],
  props: {
    goodsId: String,
    disabled: Boolean
  },
  computed:{
    casOptions(){
      this.casKey ++;
      return this.classifyData.filter(item => item.tag === this.model.tag)
    }
  },
  data(){
    return{
      isInit: true,
      productCategory: [],
      model:{
        name: '',
        subTitle: '',
        tag: 0,
        label: [],
        productCategoryId: '',
        productSn: '',
        unit: '件',
        sort: '',
        returnModel: '',
        deliveryMode: '',
        ruleId: ''
      },
      rules:{
        name: [{required: true, message: "请输入商品名称", trigger: "blur"}],
        productCategoryId: [{required: true, message: "请选择商品分类", trigger: "change"}],
        productSn: [{required: true, message: "请输入商品货号", trigger: "blur"}],
        unit: [{required: true, message: "请输入计量单位", trigger: "blur"}],
        returnModel: [{required: true, message: "请选择商品是否可退", trigger: "change"}],
        deliveryMode: [{required: true, message: "请选择商品物流方式", trigger: "change"}]
      },
      classifyData: [],
      ruleList: [],
      casKey: 0
    }
  },
  mounted(){
    //加载类别
    this.initInfo();
  },
  methods:{
    initClassify(){
      this.$yAxios({
        url: this.$api.goods.getAllClassify
      }, info => {
        this.classifyData = info;
      });
    },
    //规则列表
    initRuleList(){
      this.$yAxios({
        url: this.$api.goods.deliveryRuleList
      }, info => {
        this.ruleList = info;
      });
    },
    initInfo(){
      //加载类别
      this.initClassify();
      this.initRuleList();
      if(this.goodsId){
        //编辑页面，初始化数据
        this.isInit = false;
        this.$yAxios({
          url: this.$api.goods.getInfo,
          data:{
            id: this.goodsId
          },
          loading: true
        }, info => {
          this.initInfoDetail(info);
          this.$nextTick(() => {
            this.isInit = true;
          })
        })
      }
    },
    initInfoDetail(info){
      Object.assign(this.model, info);
      this.$set(this, 'productCategory',
          this.model.productCategoryId.split(',').map(s => s.split('/'))
      );
      if(this.model.label){
        this.$set(this.model, 'label', this.model.label.split(','));
      }else{
        this.$set(this.model, 'label', []);
      }
    },
    changeTag(){//改变商品tag的回调
      if(this.model.tag === 1){
        this.model.deliveryMode = 2;
        this.model.returnModel = 0;
      }
      this.isInit && (this.productCategory = [])
    },
    save(){
      return new Promise(resolve => {
        this.$refs['form'].validate(valid => {
          if(valid) {
            let url = this.goodsId ? this.$api.goods.updateInfo : this.$api.goods.addInfo
            let data = {...this.model};
            data.label = data.label.toString();
            this.$yAxios({
              url, data,
              loading: true
            }, info => {
              this.$message({
                type: 'success',
                message: '保存商品基本信息成功'
              });
              this.initInfoDetail(info);
              resolve(info);
            })
          }else{
            resolve(false);
          }
        });
      })
    }
  },
  watch:{
    'productCategory':{
      handler(val){
        if(this.isInit){
          let res = [];
          val.map(ary => {
            if(Array.isArray(ary)){
              res.push(ary.join('/'));
            }
          });
          this.model.productCategoryId = res.toString();
        }
      },
      deep: true
    },
    'model.tag':{
      handler(val){
        this.changeTag();
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>